<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{count}}</p>
        <p>
            <button @click="addCount">count++</button>
        </p>
        <hr>
        <p>{{zhang.name}}---{{zhang.age}}</p>
        <p>{{zhang.hobby}}</p>
        <p>{{zhang.grade}}</p>
        <p>
            <button @click="changeAge">changeAge</button>
            <button @click="changeChinese">changeChinese</button>
        </p>
    </div>
</body>
<script type="module">
    // 整体载入  => 查看模块内暴露的变量和方法
    import * as Vue from "../js/vue.esm-browser.js";
    console.log(Vue);

    // 按需引入
    import { createApp, ref, reactive, computed, watch, watchEffect } from "../js/vue.esm-browser.js";

    // Vue3组合式语法如何使用生命周期钩子函数
    //  1. onBeforeMount, onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onunmounted 都是工具函数,只是提前存储的对应阶段的回到函数,并在指定阶段触发
    //  2. 没有onBeforeCreate,onCreated
    //  3. 组合式写法和选项式写法不冲突,会合并为一个数组列表   => 依次执行 
    import {  onBeforeMount, onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from "../js/vue.esm-browser.js";


    // 组合式写法 可以理解为是选项式语法的优化, 但是最终还是会被解析成选项式语法
    // 在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性
    let app = createApp({
        setup() {

            let count = ref(1);
            const zhang = reactive({
                name: "张三",
                age: 18,
                hobby: ["唱", "跳", "rap"],
                grade: {
                    chinese: 55,
                    math: 66,
                    english: 77,
                },
            })


            const changeAge = () => {
                zhang.age++;
            }

            const changeChinese = () => {
                zhang.grade.chinese++;
            }

            const addCount = () => {
                count.value++;
            }

            onBeforeMount(()=>{
                console.log("onBeforeMount");
            })
            onMounted(function(){
                console.log("onMounted1")
            })
            onMounted(function(){
                console.log("onMounted2")
            })

            return {
                count,
                addCount,

                zhang,
                changeAge,
                changeChinese
            }
        },

        // 声明周期钩子选项式写法
        mounted() {
            console.log("mounted1", this);
        },
        mounted() {
            console.log("mounted2", this);
        },
    })

    app.mount("#app");
</script>

</html>